<template>
	<view class="content">
		<view class="nav">
			<view @click="showpicker=true">
				选择精修或者简修：{{label}}
			</view>
			<u-picker :show="showpicker" :columns="photolist" keyName="label" @cancel="cancel" @change="change"
				@confirm="confirm"></u-picker>
		</view>
		<view class="pathList" v-for="item in routelist" :key="item.id">
			<view class="pathList-title">{{item.attractionName}}的照片</view>
			<u-empty v-if="item.orderAttractionImages <= 0" mode="list" width="50%" textSize="30"
				icon="http://cdn.uviewui.com/uview/empty/list.png">
			</u-empty>
			<view class="pathList-item">
				<view class="select-photo" v-for="(image, index) in item.orderAttractionImages" :key="index">
					<!-- <checkbox-group @change="goswitch(item, image)">
						<checkbox :value="image.id.toString()" :checked="image.checked" />
					</checkbox-group> -->
					<view class="pathAttractionList">
						<image @click="pushImg(image)"
							:src="image.image ? $u.fileBaseUrl + image.image :'../../static/images/index/zwtp.png'"
							mode="aspectFit">
						</image>
						<input type="text" v-model="item.orderAttractionImages[index].remarks" placeholder="请输入备注" />
						<view v-if="image.checked" class="order-number">{{image.order}}</view>
						<view class="type" v-if="image.type===1 ||image.type===0">
							{{image.type===1?'简修':image.type===0?'精修':''}}
						</view>
						<view class="Preview" @click="getImage(image.image)">
							预览图片
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="customizedRoute">
			<view class="select-msg">
				<text>
					已选精修：{{jinxiuImage.length + "/"}}{{list. unSelectTruingNumber? list. unSelectTruingNumber + list.selectTruingNumber :'0' }}张</text>
				<text>已选简修：{{jianxiuImage.length + "/"}}{{list.unSelectSimpleModifyNumber?list. unSelectSimpleModifyNumber +  list.selectSimpleModifyNumber :'0' }}张</text>
			</view>
			<view class="customizedRoute-flex">
				<button class="addphoto" @click="showphoto = true">加照片</button>
				<button class="customizedRoute-button" @click="goNextStep">
					<text>提交</text>
					<text>(最多只能选择{{list.unSelectTruingNumber? list.unSelectTruingNumber+list.selectTruingNumber+list.selectSimpleModifyNumber +list.unSelectSimpleModifyNumber : '0'}}张照片哦)</text>
				</button>
			</view>

		</view>

		<u-popup :show="showphoto" @close="close" mode="top" @open="open">
			<view class="u-popup">
				<view class="box-photo">
					<view class="photographer">
						<view class="gender-label">精修</view>
						<view class="needphotographer">
							<view class="u-slider">
								<text @click="minus()">-</text>
								<view style="width: 350rpx;">
									<u-slider v-model="from.truingNumber" activeColor="#3c9cff" inactiveColor="#3c9cff"
										block-width="40"></u-slider>
								</view>
								<text @click="add()">+</text>
							</view>
							<text>{{from.truingNumber}}张</text>
						</view>
					</view>

					<view class="photographer">
						<view class="gender-label">简修</view>
						<view class="needphotographer">
							<view class="u-slider">
								<text @click="minuspeople()">-</text>
								<view style="width: 350rpx;">
									<u-slider v-model="from.simpleModifyNumber" activeColor="#3c9cff"
										inactiveColor="#3c9cff" block-width="40"></u-slider>
								</view>
								<text @click="addpeople()">+</text>
							</view>
							<text>{{from.simpleModifyNumber}}张</text>
						</view>
					</view>
				</view>
				<view class="button">
					<button @click="getminus">取消</button>
					<button @click="getdownload">确定</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: {
					pageNum: 1,
					pageSize: 10
				},
				total: 0,
				selectedCount: 0,
				number: 50,
				id: 0,
				routelist: [],
				lastOrder: 0,
				showphoto: false,
				photolist: [
					[{
						label: '精修',
						type: 0,
					}, {
						label: '简修',
						type: 1,
					}]
				],
				photoIndex: 0,
				// simpleModifyNumber: 0, //简修照片数量
				// truingNumber: 0, //精修照片数量
				showpicker: false,
				from: {
					type: 0,
					truingNumber: 0,
					simpleModifyNumber: 0,
				},
				label: '精修',
				jinxiuImage: [],
				jianxiuImage: [],
				// from: {
				// 	truingNumber: 0,
				// 	simpleModifyNumber: 0
				// },
				list: {}
			};
		},
		computed: {
			sortedPathAttractionList() {
				return [...this.routelist].sort((a, b) => {
					if (a.checked && b.checked) {
						return a.order - b.order;
					}
					if (a.checked) return -1;
					if (b.checked) return 1;
					return 0;
				});
			}
		},
		onLoad(options) {
			uni.showLoading({
				title: '加载中...'
			})
			this.getconfigKey()
			this.getorderPathAttraction(options.id)
			this.id = options.id
			// this.simpleModifyNumber = parseInt(options.simpleModifyNumber) || 0
			// this.truingNumber = parseInt(options.truingNumber) || 0
		},
		onShow() {
			setTimeout(() => {
				this.getorderDetail()
				uni.hideLoading()
			}, 1000)
		},
		onPullDownRefresh() {
			this.page.pageNum = 1
			this.page.pageSize = 10
			this.getorderPathAttraction()
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			this.loadMore();
		},
		methods: {
			// 加减精修简修照片数量
			minus() {
				if (this.from.truingNumber >= 1) {
					this.from.truingNumber--
				} else {
					return
				}
			},
			add() {
				if (this.from.truingNumber <= 99) {
					this.from.truingNumber++
				} else {
					return
				}
			},
			minuspeople() {
				if (this.from.simpleModifyNumber >= 1) {
					this.from.simpleModifyNumber--
				} else {
					return
				}
			},
			addpeople() {
				if (this.from.simpleModifyNumber <= 99) {
					this.from.simpleModifyNumber++
				} else {
					return
				}
			},
			getminus() {
				this.showphoto = false
				this.from.truingNumber = 0
				this.from.simpleModifyNumber = 0
			},
			// 精修简修照片数量
			pushImg(image) {
				console.log(image);
				if (image.type === 1) {
					image.type = null
					this.jianxiuImage = this.jianxiuImage.filter(item => item.id !== image.id);
					if (this.from.type === 1) {
						return
					}
				}
				if (image.type === 0) {
					image.type = null
					this.jinxiuImage = this.jinxiuImage.filter(item => item.id !== image.id);
					if (this.from.type === 0) {
						return
					}
				}
				if (this.from.type) {
					if (this.list.simpleModifyNumber <= this.jianxiuImage.length) {
						uni.showToast({
							title: '简修照片数量已达到上限',
							icon: 'none'
						})
						return
					}
					image.type = this.from.type
					this.jianxiuImage.push({
						id: image.id,
						remarks: image.remarks,
					})
				} else {
					if (this.list.truingNumber <= this.jinxiuImage.length) {
						uni.showToast({
							title: '精修照片数量已达到上限',
							icon: 'none'
						})
						return
					}
					image.type = this.from.type
					this.jinxiuImage.push({
						id: image.id,
						remarks: image.remarks,
					})
				}
			},
			cancel() {
				this.showpicker = false
			},
			open() {},
			close() {
				this.showphoto = false
				this.from.truingNumber = 0
				this.from.simpleModifyNumber = 0
			},
			getminus() {
				this.showphoto = false
				this.from.truingNumber = 0
				this.from.simpleModifyNumber = 0
			},
			confirm(e) {
				console.log("e", e);
				this.from.type = e.value[0].type
				this.label = e.value[0].label
				this.showpicker = false
			},
			change(e) {
				this.from.type = e.value[0].type
				this.label = e.value[0].label
			},
			// 确定加照片
			getaddphoto() {
				this.showphoto = false
			},
			// 切换精修简修
			switchphoto(index) {
				this.photoIndex = index
			},
			// 预览图片
			getImage(images) {
				uni.previewImage({
					current: this.$u.fileBaseUrl + images,
					urls: [this.$u.fileBaseUrl + images]
				})
			},
			// 选择照片
			goswitch(item, image) {
				let that = this
				if (!image.checked) {
					// 如果是新选中的项目
					that.lastOrder++;
					image.order = that.lastOrder;
					that.selectedCount++;
				} else {
					// 如果是取消选中的项目
					image.order = null;
					that.selectedCount--;
				}

				image.checked = !image.checked;
				if (that.selectedCount >= that.number) {
					uni.showModal({
						title: `最多只能选择${that.number}张照片,如果想要继续添加请点击确定按钮付款！`,
						async success(res) {
							if (res.confirm) {
								// 处理确认逻辑
							} else if (res.cancel) {
								that.$u.toast('取消添加照片')
							}
						}
					})
				}
				that.recalculateOrder();
			},

			recalculateOrder() {
				// 创建一个包含所有选中图片的数组
				const allSelectedImages = this.routelist.flatMap(item =>
					item.orderAttractionImages.filter(image => image.checked)
				);

				// 按照原始顺序排序选中的项目
				allSelectedImages.sort((a, b) => a.order - b.order);

				// 重新分配序号
				allSelectedImages.forEach((image, index) => {
					image.order = index + 1;
				});

				this.lastOrder = allSelectedImages.length;
			},

			// 订单详情列表
			async getorderDetail() {
				let res = await this.$u.api.getorderDetail({
					id: this.id
				})
				if (res.code == 200) {
					this.list = res.data
				}
			},

			// 确定精修简修照片数量并支付
			async getdownload() {
				let that = this
				that.showphoto = false
				let res = await that.$u.api.getaddImage({
					truingNumber: that.from.truingNumber,
					simpleModifyNumber: that.from.simpleModifyNumber,
					orderId: that.id,
				})
				if (res.code == 200) {
					// wx.requestPayment({
					// 	timeStamp: res.data.timeStamp,
					// 	nonceStr: res.data.nonceStr,
					// 	package: res.data.packageVal,
					// 	signType: res.data.signType,
					// 	paySign: res.data.paySign,
					// 	success(res1) {
					that.$u.toast('添加成功')
					that.from.truingNumber = 0
					that.from.simpleModifyNumber = 0
					that.getorderDetail()
					// },
					// fail(res1) {
					// 	that.$u.toast('支付失败')
					// 	uni.reLaunch({
					// 		url: '/packagesMe/me/myOrder'
					// 	})
					// }
					// })
				}
			},

			// 提交图片
			async goNextStep() {
				// const orderPathAttractionList = this.routelist.flatMap(item =>
				// 	item.orderAttractionImages
				// 	.filter(image => image.checked)
				// 	.map(image => ({
				// 		id: image.id,
				// 		remarks: image.remarks,
				// 		sort: image.order
				// 	}))
				// );
				//精修
				const requestDataJinXiu = {
					type: 0,
					orderId: this.id,
					orderAttractionImages: this.jinxiuImage
				};
				//简修
				const requestDataJianXiu = {
					type: 1,
					orderId: this.id,
					orderAttractionImages: this.jianxiuImage
				};
				if (this.jinxiuImage.length <= 0 || this.jianxiuImage.length <= 0) {
					this.$u.toast('请选择照片');
					return;
				}
				try {
					let resjinxiu = await this.$u.api.getorderAttractionImage(requestDataJinXiu);
					let resjianxiu = await this.$u.api.getorderAttractionImage(requestDataJianXiu);
					if (resjinxiu.code == 200) {
						this.$u.toast('提交成功');
						setTimeout(() => {
							uni.navigateBack();
						}, 1000);
					} else {
						this.$u.toast('提交失败：' + resjinxiu.msg);
						return
					}
					if (resjianxiu.code == 200) {
						this.$u.toast('提交成功');
						setTimeout(() => {
							uni.navigateBack();
						}, 1000);
					} else {
						this.$u.toast('提交失败：' + resjianxiu.msg);
						return
					}
				} catch (error) {
					console.error('提交错误：', error);
					this.$u.toast('提交出错，请稍后重试');
				}
			},

			// 下拉加载
			loadMore() {
				setTimeout(() => {
					if (this.routelist.length >= this.total) {
						uni.showToast({
							title: '没有更多图片了',
							icon: "none"
						})
					} else {
						this.page.pageNum = this.page.pageNum + 1;
						this.page.pageSize = this.page.pageSize + 10;
						uni.showLoading({
							title: '加载中...'
						})
						this.getorderPathAttraction()
						setTimeout(() => {
							uni.hideLoading()
						}, 2000)
					}
				}, 1000);
			},
			// 查询基础照片数量
			async getconfigKey() {
				let res = await this.$u.api.getconfigKey({
					configKey: 'photo_num'
				})
				if (res.code == 200) {
					this.number = Number(res.msg)
					console.log(this.number);
				}
			},
			// 已完成获取路线图片路线
			async getorderPathAttraction(id) {
				let res = await this.$u.api.getorderPathAttraction({
					id: id,
					pageSize: this.page.pageSize,
					pageNum: this.page.pageNum
				});
				if (res.code == 200) {
					this.routelist = res.rows.map(item => ({
						...item,
						orderAttractionImages: item.orderAttractionImages.map(
							image => {
								if (image.isUserSelected) {
									if (image.type === 0) {
										this.jinxiuImage.push({
											id: image.id,
											remarks: image.remarks,
										})
									} else {
										this.jianxiuImage.push({
											id: image.id,
											remarks: image.remarks,
										})
									}
								}


								return {
									...image,
									checked: false,
									order: null,
									remarks: '' // 初始化备注为空字符串
								}
							})
					}));
					this.total = res.total;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #fff;
		min-height: 90vh;
		padding-bottom: 100rpx;
		box-sizing: border-box;
		font-size: 27rpx;

		.nav {
			margin: 20rpx 20rpx 20rpx 40rpx;
			font-weight: 700;
			display: flex;
			align-items: center;
			justify-content: space-around;
		}

		.pathList {
			margin: 0 20rpx;

			.pathList-title {
				font-weight: 600;
				font-size: 30rpx;
				margin-left: 20rpx;
			}

			.pathList-item {
				padding: 20rpx;
				box-sizing: border-box;
				display: flex;
				flex-wrap: wrap;
				align-items: center;

				.select-photo {
					width: 48%;
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					margin: 20rpx 0;

					.pathAttractionList {
						width: 75%;
						border-radius: 20rpx;
						box-shadow: 0rpx 7rpx 20rpx #ccc;
						padding: 20rpx;
						box-sizing: border-box;
						margin-left: 10rpx;
						position: relative;

						.Preview {
							width: 100rpx;
							text-align: center;
							position: absolute;
							top: -10rpx;
							left: -10rpx;
							font-size: 20rpx;
							background-color: $overall-color;
							color: #fff;
							padding: 5rpx;
							box-sizing: border-box;
							border-radius: 20rpx;
						}

						image {
							width: 180rpx;
							height: 200rpx;
							margin: 20rpx;
							border-radius: 20rpx;
						}

						view {
							background-color: #fff;
							margin: 20rpx;

							text {
								width: 250rpx;
								display: block;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;

								&:nth-child(1) {
									font-weight: 700;
								}
							}


						}

						.order-number {
							position: absolute;
							top: 10rpx;
							right: 10rpx;
							background-color: $overall-color;
							color: white;
							border-radius: 50%;
							width: 40rpx;
							height: 40rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 24rpx;
						}

						.type {
							position: absolute;
							top: -10rpx;
							right: 0;
							display: inline-block;
							width: 100rpx;
							height: 40rpx;
							line-height: 40rpx;
							color: #fff;
							text-align: center;
							border-radius: 15rpx;
							background-color: $overall-color;
						}
					}
				}
			}

		}

		.customizedRoute {
			padding: 30rpx 0 50rpx 0;
			width: 720rpx;
			position: fixed;
			bottom: 0;
			background-color: #fff;
			margin: 0 15rpx;
			z-index: 999;

			.select-msg {
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin: 20rpx 0;
			}

			.customizedRoute-flex {
				display: flex;
				align-items: center;
			}

			.addphoto {
				width: 40%;
				color: $overall-color;
				background-color: #fff;
				text-align: center;
				padding: 20rpx 30rpx;
				box-sizing: border-box;
				margin-right: 20rpx;
				border: 2rpx solid $overall-color;
			}

			.customizedRoute-button {
				width: 58%;
				color: #fff;
				background-color: $overall-color;
				text-align: center;
				padding: 20rpx;
				box-sizing: border-box;
				border-radius: 20rpx;

				text {
					&:nth-child(2) {
						display: inline-block;
						margin-top: 10rpx;
						font-size: 22rpx;
					}
				}
			}
		}

		.u-popup {
			margin: 0 auto;
			padding: 20rpx;
			box-sizing: border-box;

			.box-photo {
				.photographer {
					display: flex;
					align-items: center;

					.gender-label {
						margin-right: 20rpx;
					}

					.needphotographer {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 20rpx 0 0 0;
						box-sizing: border-box;

						.u-slider {
							display: flex;
							align-items: center;
							padding: 20rpx 30rpx;
							box-sizing: border-box;
							border: 1rpx solid $overall-color;
							border-radius: 40rpx;
							color: $overall-color;
							font-size: 27rpx;
							margin: 0 20rpx 0 0;

							text {
								font-size: 50rpx;
							}
						}

						.stay {
							flex: 1;
							text-align: center;
							padding: 20rpx 30rpx;
							box-sizing: border-box;
							border: 1rpx solid $overall-color;
							border-radius: 40rpx;
							color: $overall-color;
							font-size: 27rpx;
							margin: 0 20rpx 0 0;

							&.active {
								background-color: $overall-color;
								color: #fff;
							}
						}

					}

					.crown {
						position: absolute;
						top: 5px;
						left: 5px;
						font-size: 20px;
					}
				}
			}

			.button {
				display: flex;
				align-items: center;
				justify-content: space-around;

				button {
					width: 220rpx;
					padding: 20rpx;
					box-sizing: border-box;
					border-radius: 20rpx;
					margin-top: 20rpx;

					&:nth-child(1) {
						background-color: $overall-color;
						color: #fff;
					}

					&:nth-child(2) {
						background-color: #fff;
						color: $overall-color;
						border: 2rpx solid $overall-color;
					}
				}
			}
		}
	}
</style>